import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import 'package:yi_shop/model/invite.dart';
import 'package:yi_shop/ui/draw_under_line.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class InviteDetailController extends GetxController {
  RxList<InviteDetailModel> pageList = RxList([]);

  late ScrollController scrollController;

  RxBool isLoading = false.obs;

  RxBool hasNext = true.obs;

  RxInt total = 45.obs;

  @override
  void onInit() {
    initData();
    scrollController = ScrollController()
      ..addListener(() {
        if (isLoading.isFalse &&
            scrollController.position.pixels >= scrollController.position.maxScrollExtent) {
          isLoading.value = true;
          loadMoreData();
        }
      });
    super.onInit();
  }

  void initData() {
    for (var i = 0; i < 10; i++) {
      pageList.add(InviteDetailModel(
          nickname: '白居易',
          avatar:
              'https://img0.baidu.com/it/u=3762686575,934747082&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1713546000&t=155969236ec7756e85817faedb859f93',
          mobile: '1335987107',
          registerTime: DateFormat('yyyy-MM-dd HH:mm')
              .format(DateTime.now().subtract(Duration(days: i + 1)))));
    }
  }

  Future<void> loadMoreData() {
    return Future.delayed(const Duration(seconds: 3), () {
      if (total.value > pageList.length) {
        hasNext.value = true;
        isLoading.value = false;
        initData();
        return;
      }
      hasNext.value = false;
      isLoading.value = false;
    });
  }

  @override
  void onClose() {
    scrollController.dispose();
    super.onClose();
  }
}

class InviteDetailPage extends GetView<InviteDetailController> {
  const InviteDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: Text(
          '邀请明细',
          style: StylesUtils.customTextStyle(
              fontSize: StylesUtils.fontSize18, fontWeight: FontWeight.w700),
        ),
      ),
      body: SingleChildScrollView(
        controller: controller.scrollController,
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(bottom: 20),
              color: Colors.white,
              height: 70,
              child: CustomPaint(
                painter: _DrawLinePaint(),
                child: Row(
                  children: [
                    Expanded(
                        child: Row(
                      children: [
                        Expanded(
                            child: Container(
                          alignment: Alignment.centerRight,
                          padding: const EdgeInsets.only(right: 5),
                          child: SvgUtils.assetName('u7046', width: 32, height: 30),
                        )),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.only(left: 5),
                          child: Column(
                            children: [
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 15),
                                child: Text(
                                  '成功邀请',
                                  style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color6666,
                                  ),
                                ),
                              ),
                              Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.centerLeft,
                                  child: Obx(() => Text.rich(TextSpan(children: [
                                        TextSpan(
                                            text: '${controller.total.value}',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color3333,
                                                fontSize: StylesUtils.fontSize18,
                                                fontWeight: FontWeight.w500)),
                                        TextSpan(
                                            text: '人',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color6666))
                                      ]))))
                            ],
                          ),
                        ))
                      ],
                    )),
                    Expanded(
                        child: Row(
                      children: [
                        Expanded(
                            child: Container(
                          alignment: Alignment.centerRight,
                          padding: const EdgeInsets.only(right: 5),
                          child: SvgUtils.assetName('u7050', width: 30, height: 30),
                        )),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.only(left: 5),
                          child: Column(
                            children: [
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 15),
                                child: Text(
                                  '累计奖励',
                                  style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color6666,
                                  ),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  TextSpan(
                                      text: '500.00',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color3333,
                                          fontSize: StylesUtils.fontSize18,
                                          fontWeight: FontWeight.w500)),
                                  TextSpan(
                                      text: '元',
                                      style:
                                          StylesUtils.customTextStyle(color: ColorsUtils.color6666))
                                ])),
                              )
                            ],
                          ),
                        ))
                      ],
                    ))
                  ],
                ),
              ),
            ),
            Container(
              color: Colors.white,
              padding: const EdgeInsets.symmetric(horizontal: 15),
              child: Column(
                children: [
                  Container(
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(top: 15, bottom: 25),
                    child: Text(
                      '邀请排行榜',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color3333,
                          fontWeight: FontWeight.w700,
                          fontSize: StylesUtils.fontSize16),
                    ),
                  ),
                  Obx(() => ListBody(
                        children: controller.pageList
                            .asMap()
                            .map((key, row) => MapEntry(
                                key,
                                DrawUnderLine(
                                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                                  child: Container(
                                    padding: const EdgeInsets.only(top: 10, bottom: 20),
                                    child: Row(
                                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                      children: [
                                        CircleAvatar(
                                          radius: 25,
                                          backgroundImage: CachedNetworkImageProvider(row.avatar),
                                        ),
                                        Expanded(
                                            child: Container(
                                          padding: const EdgeInsets.only(left: 10),
                                          alignment: Alignment.centerLeft,
                                          child: Column(
                                            children: [
                                              Container(
                                                alignment: Alignment.centerLeft,
                                                child: Text(
                                                  row.nickname,
                                                  style: StylesUtils.customTextStyle(
                                                      color: ColorsUtils.color6666,
                                                      fontSize: StylesUtils.fontSize13),
                                                ),
                                              ),
                                              Container(
                                                margin: const EdgeInsets.only(top: 10),
                                                alignment: Alignment.centerLeft,
                                                child: Text(
                                                  row.mobile.replaceRange(
                                                      3, row.mobile.length - 3, '*****'),
                                                  style: StylesUtils.customTextStyle(
                                                      color: ColorsUtils.color6666,
                                                      fontSize: StylesUtils.fontSize13),
                                                ),
                                              )
                                            ],
                                          ),
                                        )),
                                        SizedBox(
                                          width: 190,
                                          child: Column(
                                            children: [
                                              Container(
                                                alignment: Alignment.centerLeft,
                                                child: Text.rich(TextSpan(children: [
                                                  TextSpan(
                                                      text: '类型：',
                                                      style: StylesUtils.customTextStyle(
                                                          color: ColorsUtils.color9999)),
                                                  TextSpan(
                                                      text: row.type.statusName,
                                                      style: StylesUtils.customTextStyle(
                                                          color: ColorsUtils.color6666))
                                                ])),
                                              ),
                                              Container(
                                                alignment: Alignment.centerLeft,
                                                margin: const EdgeInsets.only(top: 10),
                                                child: Text.rich(TextSpan(children: [
                                                  TextSpan(
                                                      text: '时间：',
                                                      style: StylesUtils.customTextStyle(
                                                          color: ColorsUtils.color9999)),
                                                  TextSpan(
                                                      text: row.registerTime,
                                                      style: StylesUtils.customTextStyle(
                                                          color: ColorsUtils.color6666))
                                                ])),
                                              ),
                                            ],
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                )))
                            .values
                            .toList(),
                      ))
                ],
              ),
            ),
            Obx(() {
              if (controller.hasNext.isFalse) {
                return noBottom();
              }
              return renderBottom();
            })
          ],
        ),
      ),
    );
  }

  Widget noBottom() {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 15),
      alignment: Alignment.center,
      child: const Text(
        '已经到底',
        style: TextStyle(
          fontSize: 15,
          color: Color(0xFF333333),
        ),
      ),
    );
  }

  Widget renderBottom() {
    if (controller.isLoading.isTrue) {
      return Container(
        padding: const EdgeInsets.symmetric(vertical: 15),
        child: const Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '努力加载中...',
              style: TextStyle(
                fontSize: 15,
                color: Color(0xFF333333),
              ),
            ),
            Padding(padding: EdgeInsets.only(left: 10)),
            SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(strokeWidth: 3),
            ),
          ],
        ),
      );
    }
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 15),
      alignment: Alignment.center,
      child: const Text(
        '上拉加载更多',
        style: TextStyle(
          fontSize: 15,
          color: Color(0xFF333333),
        ),
      ),
    );
  }
}

class _DrawLinePaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..strokeCap = StrokeCap.round
      ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2);
    canvas.drawLine(Offset(size.width / 2, (size.height - 60) / 2),
        Offset(size.width / 2, (size.height - 60) / 2 + 60), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
